/*4.8 警告
  Name:       mod_Huialert
  Example:
  <div class="Huialert Huialert-success|Huialert-danger|Huialert-error|Huialert-info|Huialert-block">
  <i class="Hui-iconfont">&#xe6a6;</i>
  警告内容
  <ul>
  	<li>……</li>
  </ul>
  </div>
  Explain:		警告,使用警告框jQuery插件
*/

.Huialert {
  position: relative;
  padding: 8px 35px 8px 14px;
  margin-bottom: 20px;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  background-color: #fcf8e3;
  border: 1px solid #fbeed5;
  color: #c09853;
  h4 {
      color: #c09853;
      margin: 0;
  }
  .Hui-iconfont {
      position: absolute;
      top: 9px;
      right: 10px;
      line-height: 20px;
      cursor: pointer;
      color: #000;
      opacity: 0.2;
      _color: #666;
      &.hover {
          color: #000;
          opacity: 0.8
      }
  }
  &.Huialert-success {
      color: #468847;
      background-color: #dff0d8;
      border-color: #d6e9c6;
      h4 {
          color: #468847
      }
  }
  &.Huialert-danger {
      color: #b94a48;
      background-color: #f2dede;
      border-color: #eed3d7;
      h4 {
          color: #b94a48
      }
  }
  &.Huialert-error {
      color: #fff;
      background-color: #f37b1d;
      border-color: #e56c0c;
      h4 {
          color: #fff
      }
  }
  &.Huialert-info {
      color: #31708f;
      background-color: #d9edf7;
      border-color: #bce8f1;
      h4 {
          color: #31708f
      }
  }
  &.Huialert-block {
      padding-top: 14px;
      padding-bottom: 14px;
      >p,
      >ul {
          margin-bottom: 0
      }
      p+p {
          margin-top: 5px
      }
  }
}
